<template>
  <div class="yy-schedule-selector">
    <el-dialog
        v-model="isVisible"
        title="确认框"
        draggable
        width="500px"
        :close-on-click-modal="false"
        @close="onCancelDialog"
        :show-close="true"
        class="yy-modal--custom"
    >
      <div class="yy-schedule-selector_list">
        <div style="text-align: center;
    color: green;
    font-size: 33px;
    padding: 34px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;">
          <span>签到成功</span>
        </div>
        <div>
          <label>就诊人:</label>
          <span>{{queue.patientName}}</span>
        </div>
        <div>
          <label>就诊序号:</label>
          <span>{{queue.registerNo}}</span>
        </div>
        <div>
          <label>挂号时间:</label>
          <span>{{formatDate(queue.registerTime)}}</span>
        </div>
        <div>
          <label>科室名称:</label>
          <span>{{queue.departName}}</span>
        </div>
        <div>
          <label>挂号科目:</label>
          <span>{{queue.itemName}}</span>
        </div>
        <div v-if="queue.doctorId">
          <label>签到医生:</label>
          <span>{{queue.doctorName}}</span>
        </div>
        <div v-if="queue.scheduleFlag === 1">
          <label>预约时间:</label>
          <span>{{queue.scheduleFromTime + '-' + queue.scheduleToTime}}</span>
        </div>
        <div>
          <label>等待人数:</label>
          <span>{{queue.await}}</span>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancelDialog">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {ref,defineExpose } from "vue";
import {QueueItemModel} from "@/model/QueueItemModel";
import {formatDate} from "../../utils/yayi";

const isVisible = ref(false)

const queue = ref<QueueItemModel>()


const onShowDialog = (queueItem: QueueItemModel) => {
  queue.value = queueItem
  isVisible.value = true
}

const onCancelDialog = () => {
  isVisible.value = false
}

defineExpose({
  onShowDialog
})

</script>
<style scoped lang="scss">
  .yy-schedule-selector_list {
    line-height: 32px;
    letter-spacing: 2px;
    font-size: 18px;
    label {
      font-weight: normal;
    }
    span {
      margin-left: 5px;
      font-weight: 700;
    }
  }
</style>
